<template>
    <div class="IPBox">
        <div class="title">
            <img :src="china" alt="" height="30px" class="pointer" />
            <span class="header pointer">{{ props.node.carriedInfo.ip }}</span>
        </div>
        <p class="name">基本属性</p>
        <div class="desc">
            <div class="desc-title">应用场景:</div>
            <div class="desc_content">{{ props.node.carriedInfo.appScenario }}</div>
        </div>
        <div class="desc">
            <div class="desc-title">ASN:</div>
            <div class="desc_content">{{ props.node.carriedInfo.asn }}</div>
        </div>
        <div class="desc">
            <div class="desc-title">首次域名指向:</div>
            <div class="desc_content">{{ props.node.carriedInfo.domainFirst }}</div>
        </div>
        <div class="desc">
            <div class="desc-title">末次域名指向:</div>
            <div class="desc_content">{{ props.node.carriedInfo.domainNot }}</div>
        </div>
        <div class="desc">
            <div class="desc-title">地理位置:</div>
            <div class="desc_content">{{ props.node.carriedInfo.location }}</div>
        </div>
        <div class="desc">
            <div class="desc-title">当前开放端口:</div>
            <div class="desc_content">{{ props.node.carriedInfo.port }}</div>
        </div>
        <p class="name">关系拓展</p>
        <div class="Relationship" v-if="props.node.carriedInfo.certificateNum">
            <div class="center">
                <img :src="ipCertificate" alt="" class="relationIcon" />
                <span>绑定IP证书</span>
            </div>
            <div class="center">
                <span class="marginRight">{{ props.node.carriedInfo.certificate.length }}/{{
                    props.node.carriedInfo.certificateNum }}</span>
                <span class="marginRight">|</span>
                <el-icon>
                    <Share />
                </el-icon>
            </div>
        </div>
        <div class="Relationship" v-if="props.node.carriedInfo.portNum">
            <div class="center">
                <img :src="ipPort" alt="" class="relationIcon" />
                <span>IP开放端口</span>
            </div>
            <div class="center">
                <span class="marginRight">{{ props.node.carriedInfo.port.length }}/{{ props.node.carriedInfo.portNum
                    }}</span>
                <span class="marginRight">|</span>
                <el-icon>
                    <Share />
                </el-icon>
            </div>
        </div>

        <div class="Relationship" v-if="props.node.carriedInfo.html_favicon">
            <div class="center">
                <img :src="webIcon" alt="" class="relationIcon" />
                <span>网页图标</span>
            </div>
            <div class="center">
                <span class="marginRight">{{ props.node.carriedInfo.html_favicon.length }}/{{
                    props.node.carriedInfo.html_faviconNum }}</span>
                <span class="marginRight">|</span>
                <el-icon>
                    <Share />
                </el-icon>
            </div>
        </div>
        <div class="Relationship" v-if="props.node.carriedInfo.html_title">
            <div class="center">
                <img :src="htmlIcon" alt="" class="relationIcon" />
                <span>网页标题</span>
            </div>
            <div class="center">
                <span class="marginRight">{{ props.node.carriedInfo.html_title.length }}/{{
                    props.node.carriedInfo.html_titleNum }}</span>
                <span class="marginRight">|</span>
                <el-icon>
                    <Share />
                </el-icon>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import china from '@/assets/images/china.png'
import nullBox from '@/assets/icon/null.png'
import Ip from '@/assets/icon/bin_ip.png'
import ipPort from '@/assets/icon/ip_port.png'
import ipCertificate from '@/assets/icon/bin_ip_certificate.png'
import webIcon from '@/assets/icon/web_icon.png'
import htmlIcon from '@/assets/icon/icon_hash.png'
import expand from '@/assets/icon/expand_downward.png'

const props = defineProps({
  node: {
    type: Object,
    required: true,
    default: () => { }
  }
})
</script>

<style scoped lang="scss">
.IPBox {
  .title {
    display: flex;
    align-items: center;
    margin-bottom: 1.25rem;

    .header {
      font-weight: 700;
      font-size: 1.25rem;
    }

    .ico {
      font-weight: 700;
      font-size: 1.25rem;
      margin-right: 0.3125rem;
    }
  }

  .desc {
    display: flex;
    align-items: center;
    margin-bottom: 0.9375rem;

    .desc-title {
      width: 7.5rem;
      font-size: 1.125rem;
      margin-right: 0.625rem;
    }

    .icon {
      font-size: 1.25rem;
      color: var(--el-color-primary);
      font-weight: 700;
      margin-right: 0.3125rem;
    }
  }

  .Relationship {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.9375rem;

    .icon {
      font-size: 1.25rem;
      color: var(--el-color-primary);
      font-weight: 700;
      margin-right: 0.3125rem;
    }

    .relationIcon {
      vertical-align: middle;
      width: 1.25rem;
      margin-right: 0.3125rem;
    }
  }

  .name {
    font-size: 1.125rem;
    font-weight: 600;
    margin-right: 0.625rem;
    margin-bottom: 0.9375rem;
  }
}
</style>